import { defineComponent, h, ref } from "vue";
import { ElTable, ElTableColumn } from "element-plus";

export default defineComponent({
  props: {
    columns: {
      type: Array,
      required: true,
      default() {
        return [];
      },
    },
  },

  setup(props, context) {
    const { columns } = props;
    const { attrs, expose } = context;
    const elTableRef = ref();
    expose({ elTableRef });

    function renderTableColum(column: any) {
      const { prop, template } = column;

      if (template) {
        return h(
          ElTableColumn,
          {
            align: "center",
            ...column,
          },
          {
            default: (currColum: any) =>
              context?.slots?.[prop] && context?.slots?.[prop]!(currColum),
          },
        );
      }
      return h(ElTableColumn, {
        align: "center",
        ...column,
      });
    }

    return () => {
      return h(
        ElTable,
        {
          ref: elTableRef,
          stripe: true,
          border: true,
          highlightCurrentRow: true,
          headerCellStyle: {
            background: "#f2f5ff",
            color: "#76787d",
          },
          ...attrs,
        },
        () => columns?.map((column) => renderTableColum(column)),
      );
    };
  },
});
